class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            id: 0,
            pagesize: 15,
            start: 1,
            to: '',
            counts: [],
            pagestart: 0,
            orders: 1,
            name: '',
            provincehtml: [],
            cityhtml: [],
            districthtml:[],
            contacts: "",
            phone: '',
            salesscope: '',
            province: '',
            city: '',
            district: "",
            address: '',
            star: "",
            // cid:1,
        };
    }

    formatlist(list) {
        var listitem = [], wulist = []
        if (list.length > 0) {
            list.forEach((x, i) => {
                listitem.push(
                    <tr key={i}>
                        <td>{x.name}</td>
                        <td><p>{x.contacts}</p><p>{x.phone}</p></td>
                        <td>{x.salesscope||"暂未录入"}</td>
                        <td>{x.province+x.city+x.district+x.address}</td>
                        <td>{x.star}</td>
                        <td onClick={this.setshow.bind(this, x.id, x.state)} className="tconter">{x.state == "ON" ? "显示" : "隐藏"}</td>
                        <td className="operatebox">
                            <div className='operate' id={"ope" + x.id}>
                                <div>
                                    <img src="./src/edit.png" />
                                    <p data-toggle="modal" data-target="#modalOne" className='edit' onClick={this.edit.bind(this, x.id)}>编辑</p>
                                </div>
                                <div>
                                    <img src="./src/del.png" />
                                    <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
                                </div>
                            </div>
                        </td>
                    </tr>
                )
            });
        } else {
            wulist.push(
                <p className="wulist">暂无数据</p>
            )
        }
        this.setState({ listitem, list, originallist: list, wulist })
    }
    // 编辑
    edit(e) {
        var { list } = this.state, that = this;
        list.forEach(x => {
            if (x.id == e) {
                let cityhtml = [],districthtml = []
                cityhtml.push(
                    <option value="">请选择</option>
                )
                getcitylistbyname(x.province, res => {
                    if (res.issuccess == 1) {
                        if (res.list.length > 0) {
                            res.list.forEach((x, i) => {
                                cityhtml.push(
                                    <option key={i} value={x.CityName}>{x.CityName} </option>
                                )
                            })
                        }
                        that.setState({cityhtml})
                    } else {
                        alert('获取市列表失败')
                    }
                })
                districthtml.push(
                    <option value="">请选择</option>
                )
                getdistrictlistbyname(x.city, res => {
                    if (res.issuccess == 1) {
                        if (res.list.length > 0) {
                            res.list.forEach((x, i) => {
                                districthtml.push(
                                    <option key={i} value={x.DistrictName}>{x.DistrictName} </option>
                                )
                            })
                        }
                        that.setState({districthtml})
                    } else {
                        alert('获取区列表失败')
                    }
                })


                this.setState({ id: e, name: x.name,province:x.province,city:x.city,district:x.district,address:x.address,star:x.star,
                    salesscope:x.salesscope,contacts:x.contacts,phone:x.phone, })
            }
        });
        // console.log(item, 'item')
    }
    todetail(e) {
        window.location.href = "./worksubtype.html?id=" + e;
    }
    // // 排序
    // toorder(id) {
    //     let orders = prompt("请输入1-999的正整数")
    //     if (orders == "" || orders == null) {
    //         return;
    //     }
    //     if (isNaN(orders) || orders < 1 || orders > 999) {
    //         return;
    //     }
    //     this.setState({ showloading: 'ON' })
    //     orders = Math.floor(orders);
    //     swipersetorders({ id, orders }, res => {
    //         if (res.issuccess == 1) {
    //             alert("设置成功");
    //             // this.flist(res.list);
    //             this.freshlist();
    //         } else {
    //             this.setState({ showloading: '' })
    //             alert("设置失败");
    //         }
    //     });
    // }
    // 显示隐藏
    setshow(e, i) {
        this.setState({ showloading: 'ON' })
        Hardwaresetshow(e, res => {
            if (res.issuccess == 1) {
                alert(`${i == "ON" ? '隐藏' : '显示'}成功`)
                this.freshlist()
            } else {
                this.setState({ showloading: '' })
                alert(`${i == "ON" ? '隐藏' : '显示'}失败`)
            }
        })

    }
    // 删除
    del(e) {
        this.setState({ delid: e }, () => {
            $('#myModal').modal('toggle');
        })
    }
    confirmdel() {
        this.setState({ showloading: 'ON' })
        let { delid, start } = this.state
        Hardwaredel(delid, res => {
            if (res.issuccess == 1) {
                alert('删除成功')
                $('#myModal').modal('toggle');
                this.freshlist()
            } else {
                this.setState({ showloading: '' })
                $('#myModal').modal('toggle');
                alert(res.msg);
            }
        })
    }

    setpager(pagecount, start) {
        let counts = [];
        for (let i = 0; i < pagecount; i++) {
            counts.push(start + i)
        }
        this.setState({ counts, pagestart: 0 })
    }
    clickpage(e) {
        let { start, pagesize } = this.state
        start = (e * pagesize) + 1
        this.setState({ pagestart: e, start }, () => {
            this.freshlist()
        })
    }
    setpage(e) {
        let { pagesize, start } = this.state
        pagesize = parseInt(e)
        start = 1
        this.setState({ pagesize, start }, () => {
            this.freshlist()
        })
    }


    submit() {
        var { name,province,city,district,address,star,salesscope,contacts,phone, } = this.state, that = this, err = '';
        if(star>5)err = "请输入0-5整数的星级"
        if (district == "") err = "请输入完整的地区"
        if (phone == "") err = "请输入联系电话"
        if (contacts == "") err = "请输入联系人"
        if (name == "") err = "请输入店铺名称"
        if (err.length > 0) {
            alert(err);
            return
        }
        this.setState({ showloading: 'ON' })
        var data = { name,province,city,district,address,star:parseInt(star),salesscope,contacts,phone, }
        if (this.state.id > 0) data['id'] = this.state.id;
        Hardwareaoe(data, res => {
            if (res.issuccess == 1) {
                that.setState({ id: 0, name: '',province:"",city:"",district:"",address:"",star:"",salesscope:"",contacts:"",phone:"",cityhtml:[],districthtml:[],  })
                alert(`${this.state.id > 0 ? '修改' : '保存'}成功`);
                that.freshlist()
            } else {
                that.setState({ showloading: '' })
                alert(res.msg)
            }
        })

    }

    componentDidMount() {
        this.setState({ showloading: 'ON', })
        let that = this, provincehtml = [];
        getprovincelist(res => {
            if (res.issuccess == 1) {
                provincehtml.push(
                    <option value="">请选择</option>
                )
                res.list.forEach((x, i) => {
                    provincehtml.push(
                        <option key={i} value={x.ProvinceName}>{x.ProvinceName} </option>
                    )
                })
                this.setState({ provincehtml }, () => {
                    that.freshlist()
                })
            } else {
                that.setState({ showloading: '' })
                alert("加载失败，请刷新")
            }
        })


    }

    freshlist() {
        let { pagesize, start } = this.state;
        Hardwaregetlist({ pagesize, start }, res => {
            this.setState({ showloading: '' })
            if (res.issuccess == 1) {
                if (start == 1) {
                    let pagecount = Math.ceil(res.total / pagesize);
                    this.setpager(pagecount, start);
                    this.setState({ start, total: res.total })
                }
                this.formatlist(res.list);
            }
        })

    }
    onstatechange(prop, e) {
        let estate = e.target.value, that = this
        if (prop == 'province') {
            if (estate == '') {
                that.setState({ cityhtml: [], city: '', districthtml: [], district: '' })
            } else {
                let cityhtml = []
                cityhtml.push(
                    <option value="">请选择</option>
                )
                getcitylistbyname(estate, res => {
                    if (res.issuccess == 1) {
                        if (res.list.length > 0) {
                            res.list.forEach((x, i) => {
                                cityhtml.push(
                                    <option key={i} value={x.CityName}>{x.CityName} </option>
                                )
                            })
                        }
                        that.setState({ cityhtml, city: '', districthtml: [], district: '' })

                    } else {
                        alert('获取市列表失败，请重新选择省')
                    }
                })
            }
        } else if (prop == 'city') {
            if (estate == '') {
                that.setState({ districthtml: [], district: '' })
            } else {
                let districthtml = []
                districthtml.push(
                    <option value="">请选择</option>
                )
                getdistrictlistbyname(estate, res => {
                    if (res.issuccess == 1) {
                        if (res.list.length > 0) {
                            res.list.forEach((x, i) => {
                                districthtml.push(
                                    <option key={i} value={x.DistrictName}>{x.DistrictName} </option>
                                )
                            })
                        }
                        that.setState({ districthtml, })
                    } else {
                        alert('获取区列表失败，请重新选择市')
                    }
                })
            }
        }
        this.setState({ [prop]: estate })
    }

    inputchange(prop, e) {
        // let { target } = this.state;
        // target[prop] = e.target.value
        // this.setState({ target })
        this.setState({ [prop]: e.target.value })
    }
    add() {
        this.setState({ id: 0, name: '',province:"",city:"",district:"",address:"",star:"",salesscope:"",contacts:"",phone:"",cityhtml:[],districthtml:[], })
        // $('#modalOne').modal('toggle');
    }

    render() {
        let { listitem, name,province,city,district,provincehtml,cityhtml,districthtml,address,star,salesscope,contacts,phone, } = this.state;

        return (
            <div className="breadLinebox">
                <Loading hidden={this.state.showloading != 'ON'} />
                <Modal content='确定要删除吗？' click={this.confirmdel.bind(this)} />
                <div className="modal fade" id="modalOne" >
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <div className="modal-header border">
                                <p className="modal-title">{this.state.id > 0 ? "编辑" : "新建"}</p>
                                <img data-dismiss="modal" src="./src/close.png" />
                            </div>
                            <div className="modal-body">
                                <div className="input-group">
                                    <span className="input-group-addon">店铺名称</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'name')} value={name} type="text" placeholder='请输入店铺名称' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">联系人</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'contacts')} value={contacts} type="text" placeholder='请输入联系人' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">联系电话</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'phone')} value={phone} type="text" placeholder='请输入联系电话' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">销售范围</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'salesscope')} value={salesscope} type="text" placeholder='请输入销售范围' className="input" />
                                </div>
                                <div className="input-group">
                                    <div className="label input-group-addon">
                                        店铺地区
                                    </div>
                                    <div className="mallradiobox mallradiobox1" >
                                        <select value={province} onChange={this.onstatechange.bind(this, 'province')} className="form-control select">
                                            {provincehtml}
                                        </select>
                                        <select style={{ display: cityhtml.length > 0 ? "" : "none" }} value={city} onChange={this.onstatechange.bind(this, 'city')} className="form-control select">
                                            {cityhtml}
                                        </select>
                                        <select style={{ display: districthtml.length > 0 ? "" : "none" }} value={district} onChange={this.inputchange.bind(this, 'district')} className="form-control select">
                                            {districthtml}
                                        </select>
                                    </div>
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">详细地址</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'address')} value={address} type="text" placeholder='请输入详细地址' className="input" />
                                </div>
                                <div className="input-group">
                                    <span className="input-group-addon">星级</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'star')} value={star} type="text" placeholder='请输入星级，最多5星' className="input" />
                                </div>
                            </div>
                            <div className="modal-footer border">
                                <button type="button" className="closemod" data-dismiss="modal">关闭</button>
                                <button type="button" onClick={this.submit.bind(this)} data-dismiss="modal" className="submitmod">提交</button>
                            </div>

                        </div>
                    </div>
                </div>
                <div className='content_wrap panel-default content_wrap'>
                    <div className="breadLine">
                        <div className="img">
                            <img src='./src/lm_order1.png' />
                            五金管理
                        </div>
                    </div>
                    <div className="content">
                        {/* <div style={{display:clicknew?"":"none"}} id="div"> */}

                        <div className="tabletit" >
                            <p className="add" data-toggle="modal" data-target="#modalOne" style={{ cursor: 'pointer' }} onClick={this.add.bind(this)}>新建</p>
                        </div>
                        <table className="tab">
                            <thead>
                                <tr>
                                    <th>店铺名称</th>
                                    <th>联系人</th>
                                    <th>销售范围</th>
                                    <th>店铺地区</th>
                                    <th>星级（0-5）</th>
                                    <th className="tconter">状态</th>
                                    <th className="cz tconter">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {listitem}
                            </tbody>
                        </table>
                        {this.state.wulist}

                        <div className="pagerbox">
                            <p>共{this.state.total}条</p>
                            <Pager counts={this.state.counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={this.state.pagestart} />
                        </div>
                    </div>
                </div>
            </div>


        )


    }
}





ReactDOM.render(
    <div>
        <TopLine />
        <div id='body'>
            <LeftMenu code='hardware' />
            <Main />
        </div>
    </div>
    // <Barrage/>
    , $('.container')[0]
)